<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小谭</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="util/bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="util/jquery-3.4.0.js"></script>
    <script src="util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <style>
        html,body{
            height: 100%;
        }
        .sing-box{
            width: 100%;
            height: 100%;
            background-image: linear-gradient(45deg,white,deepskyblue);
        }
        .sing-box1{
            width: 300px;
            height: 300px;
            position: absolute;
            left: 530px;
            top: 230px;
            border-radius: 10px;
        }
        .input-group{
            width: 80%;
            margin-left: 30px;
            margin-top: 10px;
        }
        *{
            font-family: "montserrat",Sans-Serif;
        }
        .sing-box-p{
            margin: 0 75px 10px;
            font-size: 30px;
            color: white;

        }
        .sing-box-btn{
            width: 240px;
            height: 30px;
           background: #10baf1;
            border: none;
            margin-left: 30px;
        }
        a{
            color: #fffdef;
        }
        a:hover{
            color: #fffdef;
            text-decoration: none;
        }
        .sing-box-a{
            margin-left: 30px;
        }
        .sing-box-a1{
            margin-left: 130px;
        }
        td{
            width: 500px;
        }
        .form-control{
            display: inline-block;
            width: 60%;
        }
        .index-register-tell{
            margin-left: 10px;
        }
        .index-register-inp{
            margin-left: 38px;
        }
        .index-register-inp1{
            margin-left: 24px;
        }
        .red{
            color: red;
        }
        .green{
            color: green;
        }
    </style>
</head>
<body>
    <div class="sing-box">
        <div class="sing-box1">
            <p class="sing-box-p">Welcome</p>
            <div class="input-group">
                <span class="input-group-addon glyphicon glyphicon-user" id="basic-addon1"></span>
                <input type="text" name="Username" class="form-control" placeholder="Username" aria-describedby="basic-addon1" id="sign-in-username">
            </div>
            <div class="input-group">
                <span class="input-group-addon glyphicon glyphicon-baby-formula" id="basic-addon2"></span>
                <input type="text" name="password" class="form-control" placeholder="password" aria-describedby="basic-addon2" id="sign-in-password">
            </div>
            <a href="" class="sing-box-a" data-toggle="modal" data-target="#myModal1">忘记密码？</a> <a href="" class="sing-box-a1" data-toggle="modal" data-target="#myModal">注册</a><br>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">注册系统</h4>
                        </div>
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>
                                        姓名：<input type="text" name="name" id="sign-in-inp1" class="form-control index-register-inp aaa"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        性别：<input type="text" name="sex" id="sign-in-inp2" class="form-control index-register-inp aaa"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        出生日期：<input type="text" name="data" id="sign-in-inp3" class="form-control index-register-tell"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        地址：<input type="text" name="address" id="sign-in-inp5" class="form-control index-register-inp"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        联系电话：<input type="text" name="tel" id="sign-in-inp4" class="form-control index-register-tell aaa"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        验证码：<input type="text" id="sign-in-inp14" class="form-control index-register-inp1"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" id="sign-in-btn3">下一步</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary sign-btn" data-dismiss="modal"  data-toggle="modal" data-target="#myModal4"  id="sign-in-btn2" disabled>确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel4">注册系统</h4>
                        </div>
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>
                                        输入账号：<input type="text" name="Username" id="sign-in-inp6" class="form-control index-register-tell"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        输入密码：<input type="text" name="password" id="sign-in-inp7" class="form-control index-register-tell"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="sign-in-btn4">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel1">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>
                                        电话号码：<input type="text" id="sign-in-inp8" name="tel" class="form-control index-register-tell"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        验证码：<input type="text" id="sign-in-inp9" class="form-control index-register-inp1"  aria-describedby="basic-addon1"><span></span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary  sign-btn" data-toggle="modal" data-dismiss="modal" data-target="#myModal3">确定</button>

                        </div>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel2">修改密码</h4>
                        </div>
                        <div class="modal-body">
                            <table>
                                <tr>
                                    <td>
                                        输入旧账号：<input type="text" name="Username" id="sign-in-inp10"  class="form-control index-register-tell"  aria-describedby="basic-addon1">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        输入新密码：<input  type="text" name="password" id="sign-in-inp11" class="form-control index-register-tell"  aria-describedby="basic-addon1">
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        验证新密码：<input type="text" name="password" id="sign-in-inp12" class="form-control index-register-tell"  aria-describedby="basic-addon1">
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" data-dismiss="modal" id="sign-in-btn5">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="sing-box-btn" id="sign-in-btn">Sign in</button>
        </div>
    </div>
    <script src="js/sign%20in/sign1.js"></script>
</body>
</html>